<template>
  <GlobalPage>
    <div class="table-box">
      <el-table
        :size="tableSize"
        :data="Data.list"
        stripe
        highlight-current-row
        style="font-size: 10px"
      >
        <el-table-column type="selection" width="35" align="center">
        </el-table-column>
        <el-table-column
          prop="id"
          label="ID"
          width="45"
          align="center"
        ></el-table-column>
        <el-table-column
          prop=""
          label="级别"
          width="60"
          align="center"
        ></el-table-column>
        <el-table-column prop="name" label="角色" width="200"></el-table-column>
        <el-table-column prop="scope" label="角色标识"></el-table-column>
        <el-table-column prop="comment" label="备注"></el-table-column>
        <el-table-column
          prop="state"
          label="状态"
          fixed="right"
          width="65"
          align="center"
        >
          <template #default="{ row }">
            <el-switch
              v-model="row.state"
              inline-prompt
              :active-value="1"
              active-text="正常"
              inactive-text="停用"
              :inactive-value="0"
              @change="changeState(row, index)"
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          fixed="right"
          label="操作"
          width="50"
          align="center"
        >
          <template #default="{ row, $index: index }">
            <el-dropdown>
              <el-button :icon="MoreFilled" circle />
              <template #dropdown>
                <el-dropdown-menu :size="small">
                  <el-dropdown-item>查看</el-dropdown-item>
                  <el-dropdown-item>限制</el-dropdown-item>
                  <el-dropdown-item>锁定</el-dropdown-item>
                  <el-dropdown-item>登出</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template></el-table-column
        >
      </el-table>
      <GlobalPagination></GlobalPagination>
    </div>
  </GlobalPage>
</template>
<script setup>
import API from "@/api";
import GlobalPage from "@/components/Global-Page/Global-Page.vue";
import GlobalPagination from "@/components/GlobalPagination/index.vue";
import GlobalTable from "@/components/Global-Table/Global-Table.vue";
import { MoreFilled, View, Edit } from "@element-plus/icons-vue";
import { reactive, onBeforeMount } from "vue";
const Data = reactive({
  page: null,
  pages: null,
  limit: null,
  total: null,
  list: [],
});
onBeforeMount(() => {
  GetRoleList();
});

function GetRoleList() {
  let { limit, page } = Data;
  API.roles
    .list({
      page,
      limit,
    })
    .then(
      (res) => {
        let { newData } = res;
        let { data: list, limit, page, pages, total } = newData;
        Data.list = list;
        Data.page = 2;
        Data.pages = pages;
        Data.limit = limit;
        Data.total = total;
      },
      (err) => {
        console.log(err);
      }
    );
}

function limitChange(e) {
  let limit = Data.limit;
  if (limit != e) {
    Data.limit = e;
    GetRoleList();
  }
}
function paginationChange(e) {
  let page = Data.page;
  if (page != e) {
    Data.page = e;
    GetRoleList();
  }
}
</script>

<style lang="scss" scoped></style>
